<template>
  <div class="product_details">
    <el-button type="text" id="custermer_return" @click="toreturn">返回</el-button>
    <div class="productDetails_card">
      <div class="card_content">
        <div class="card_left">
          <div>产品名称：</div>
          <div>产品价格：</div>
          <div>产品描述：</div>
          <div>产品主图：</div>
        </div>
        <div class="card_right">
          <div>{{this.productInfo.name}}</div>
          <div>{{this.productInfo.price}}</div>
          <div>{{this.productInfo.description}}</div>
        </div>
        <div class="product_img">
          <img :src="productInfo.photo" alt />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {};
  },
  created() {
    this.loadProduct();
  },
  computed: {
    ...mapState("productDetails", ["productInfo"])
  },
  methods: {
    ...mapActions("productDetails", ["toLoadProductInfo"]),
    //加载数据
    loadProduct() {
      this.toLoadProductInfo(this.$route.query.id);
    },
    //返回
    toreturn() {
      this.$router.push("product/list");
    }
  }
};
</script>
<style>
.product_details {
  padding: 10px;
}
.productDetails_card {
  width: 380px;
  height: 450px;
  border: 1px solid #ccc;
  box-shadow: 5px 5px 5px #ddd;
}
.card_content {
  padding: 20px;
  width: 100%;
  height: 50%;
  line-height: 50px;
}
.card_left {
  width: 40%;
  height: 100%;
  float: left;
}
.card_left > div {
  text-align: right;
}
.card_right {
  width: 60%;
  height: 100%;
  float: right;
}
.card_right > div {
  margin-right: 10px;
}
.product_img {
  height: 50px;
  margin-left: 75px;
}
.product_img > img {
  margin-top: 10px;
  width: 200px;
  height: 200px;
}
#product_return {
  padding: 10px;
}
</style>